<template>
	<div id="app">
		<QLayout
			view="hHh LpR lfr"
			@scroll="onScroll">
			<QHeader elevated>
				<QToolbar>
					<QSelect
						v-model="$root.platform"
						:options="$root.platformOptions"
						label-color="blue-2"
						label="平台"
						borderless
						style="width:120px;"/>
					<QSelect
						v-model="$root.theme"
						:options="$root.themeOptions"
						label-color="blue-2"
						label="组件主题"
						borderless
						style="width:120px;margin-left:20px"/>
				</QToolbar>
			</QHeader>
			<QPageContainer>
				<router-view></router-view>
			</QPageContainer>
			<QDrawer
				show-if-above
				bordered
				:width="250"
				:breakpoint="950"
				class="non-selectable">
				<QScrollArea class="fit" style="overflow:hidden;">
					<Menu :key="$root.platform" :data="menus" route-attr="path"/>
				</QScrollArea>
			</QDrawer>
			<QDrawer
				show-if-above
				side="right"
				:width="180"
				:breakpoint="950"
				content-class="bg-grey-1">
				<QScrollArea class="fit" style="overflow:hidden;">
					<QList
						class="text-grey-8 anchors-list">
						<QItem
							v-for="(anchor,index) in anchors"
							v-ripple
							:key="index"
							:active="anchor.id===activeAnchor"
							clickable
							dense
							@click="scrollTo(anchor.id)">
							<QItemSection>{{anchor.name}}</QItemSection>
						</QItem>
					</QList>
				</QScrollArea>
			</QDrawer>
		</QLayout>
	</div>
</template>

<script>
import {
	QToolbar,
	QLayout,
	QHeader,
	QPageContainer,
	QDrawer,
	QScrollArea,
	QList,
	QItem,
	QItemSection,
	QSelect
} from 'quasar';
import Menu from '@/components/pc/menu';
import pc from './config/pc';
import app from './config/app';
import {gsap} from 'gsap';
import {ScrollToPlugin} from 'gsap/ScrollToPlugin';
gsap.registerPlugin(ScrollToPlugin);

export default {
	name:'Main',
	components:{
		QToolbar,
		QLayout,
		QHeader,
		QPageContainer,
		QDrawer,
		QScrollArea,
		QList,
		QItem,
		QItemSection,
		Menu,
		QSelect,
	},
	data(){
		const hash=this.$route.hash;
		return {
			pc,
			app,
			activeAnchor:hash.length>1?hash.substring(1):null,
		};
	},
	computed:{
		anchors(){
			return [
				...this.$root.anchors,
			];
		},
		menus(){
			return this[this.$root.platform];
		},
	},
	created(){
		this.preventUpdate=this.$route.hash.length>1;
	},
	mounted(){
		this.$nextTick(function(){
			this.scrollToCurrentAnchor(true);
		});
	},
	watch:{
		$route(newRoute,oldRoute){
			this.scrollToCurrentAnchor(newRoute.path!==oldRoute.path);
		},
		anchors(){
			this.updateActiveAnchor();
		},
	},
	methods:{
		changeRouterHash(toHash){
			const {hash,query}=this.$route;
			if(hash!==toHash){
				this.$router.push({
					hash:toHash,
					query,
				});
			}else{
				this.scrollToCurrentAnchor();
			}
		},
		//跳转锚点
		scrollTo(id){
			this.changeRouterHash('#'+id);
		},
		//滚动到当前路由锚点的索引
		scrollToCurrentAnchor(immediate){
			const {hash}=this.$route;
			const el=hash.length>1?document.getElementById(hash.substring(1)):null;
			if(el){
				this.preventUpdate=true;
				gsap.to(window,{
					duration:immediate?0:0.5,
					scrollTo:{y:hash,offsetY:70},
					overwrite:true,
				}).then(() => {
					this.preventUpdate=false;
				});
			}else{
				this.updateActiveAnchor();
			}
		},
		//滚动时,更新当前索引
		onScroll({position}){
			if(!this.preventUpdate){
				this.updateActiveAnchor(position);
			}
		},
		//更新当前索引
		updateActiveAnchor(position){
			if(!position){
				position=window.pageYOffset||window.scrollY||0;
			}
			let last;
			for(const {id} of this.anchors){
				const item=document.getElementById(id);
				if(!item){
					continue;
				}
				if(item.offsetTop>=position+180){
					if(!last){
						last=id;
					}
					break;
				}else{
					last=id;
				}
			}
			if(last){
				this.activeAnchor=last;
			}
		},
	}
};
</script>

<style lang="scss">
.q-header{
	.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input,.q-field__marginal{
		color:#fff;
	}
}
.anchors-list .q-item{
	border-radius:10px 0 0 10px;
	margin-top:1px;
	margin-bottom:1px;
	font-size:12px;
	&.q-item--active{
		background:#e6f1fc;
	}
}
.q-page-container{
	display:flex;
	justify-content:center;
	overflow:hidden;
	>div{
		display:inline-block;
		overflow:hidden;
		flex-grow:1;
	}
}
</style>
